<template>
  <div class="container">
    <div class="card-box">
      <h2 class="setting-header">
        <strong>基本设置</strong>
      </h2>
      <div class="limit-time row">
        <span>限制有效时间</span>
        <el-switch v-model="publishSettingStore.useLimitTime" :active-value="true" :inactive-value="false" />
      </div>
      <div class="limit-time-des">
        <span>开启后，该问卷将在有效时间内在前台展示</span>
        <span v-if="publishSettingStore.useLimitTime" @click="timeLimitShow = true" class="limit-time-set">{{ limitText }}<el-icon>
          <ArrowRight />
          </el-icon></span>
      </div>
      <el-divider />
      <div class="limit-time row">
        <span>填写需登录</span>
        <el-switch v-model="publishSettingStore.useAuth" :active-value="true" :inactive-value="false" />
      </div>
      <el-divider />
      <div class="limit-time row">
        <span>访问权限</span>
        <el-switch v-model="publishSettingStore.useAccessAuth" :active-value="true" :inactive-value="false" />
      </div>
      <div class="limit-time-des">
        <span>最多支持三种权限组合</span>
      </div>
      <el-divider v-if="publishSettingStore.useAccessAuth" />
      <div class="auth-setting" v-if="publishSettingStore.useAccessAuth" v-loading="listLoading">
        <el-form label-position="left" label-width="130px">
          <!-- <el-form-item label="指定角色(应用)" v-if="permissionList && permissionList.includes(0) && publishSettingStore.useAuth"> -->
          <el-form-item label="指定角色(应用)" v-if="publishSettingStore.useAuth">
            <el-select v-model="publishSettingStore.auth" placeholder="" multiple clearable :disabled="isDisabled && !publishSettingStore.auth.length > 0">
              <el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="授权密钥" v-if="permissionList && permissionList.includes(1)"> -->
          <el-form-item label="授权密钥">
            <el-input v-model="publishSettingStore.secretKey" placeholder="生成密钥，用于访问时填写" clearable :disabled="isDisabled && publishSettingStore.secretKey == ''" @input="inputKey">
              <template #append>
                <div class="reset-password" @click="initPassword" v-if="!isInitPass" :style="{'user-select': isDisabled && publishSettingStore.secretKey == '' ? 'none' : ''}">
                  生成密码
                </div>
                <div class="done-reset-password" v-if="isInitPass">
                  <i class="iconfont">&#xe655;</i>
                  已生成
                </div>
              </template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="选择IP段白名单" v-if="permissionList && permissionList.includes(2)">
            <el-select v-model="publishSettingStore.ipGroup" placeholder="" multiple clearable :disabled="isDisabled && !publishSettingStore.ipGroup.length > 0">
              <el-option v-for="(item,index) in ipWhiteList" :key="index" :label="item.ip" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="wifi定位" v-if="permissionList && permissionList.includes(3)">
            <el-switch v-model="publishSettingStore.wifiPosition" :active-value="true" :inactive-value="false" :disabled="isDisabled && !publishSettingStore.wifiPosition" />
          </el-form-item>
          <el-form-item label="手机号验证" v-if="permissionList && permissionList.includes(4)">
            <el-switch v-model="publishSettingStore.phoneVerify" :active-value="true" :inactive-value="false" :disabled="isDisabled && !publishSettingStore.phoneVerify" />
          </el-form-item>
          <el-form-item label="微信验证" v-if="permissionList && permissionList.includes(5)">
            <el-switch v-model="publishSettingStore.wechatVerify" :active-value="true" :inactive-value="false" :disabled="isDisabled && !publishSettingStore.wechatVerify" />
          </el-form-item> -->
        </el-form>
      </div>
      <el-divider />
      <div class="d-flex option-line">
        <span class="label">协作人</span>
        <span class="option" @click="cooperateShow=true">{{currentCooperate}}<el-icon>
            <ArrowRight />
          </el-icon></span>
      </div>
      <!-- <el-divider v-if="Number(publishSettingStore.useLimitCooperate) > 0" />
      <div class="d-flex option-line" v-if="Number(publishSettingStore.useLimitCooperate) > 0">
        <span class="label">管理权限</span>
        <span class="option" @click="permissionShow=true">修改权限<el-icon>
            <ArrowRight />
          </el-icon></span>
      </div> -->
    </div>
    <div class="card-box">
      <h2 class="setting-header">
        <strong>填写设置</strong>
      </h2>
      <div class="d-flex option-line" v-if="publishSettingStore.useAuth">
        <span class="label">用户填写次数限制</span>
        <span class="option" @click="submitLimitShow=true">{{ submitLimitText }}<el-icon>
            <ArrowRight />
          </el-icon></span>
      </div>
      <el-divider v-if="publishSettingStore.useAuth" />
      <div class="d-flex option-line">
        <span class="label">IP限制</span>
        <span class="option" @click="ipLimitShow=true">{{ ipLimitText }}<el-icon>
            <ArrowRight />
          </el-icon></span>
      </div>
      <el-divider />
      <div class="d-flex option-line">
        <span class="label">设备限制</span>
        <span class="option" @click="deviceLimitShow=true">{{ deviceLimitText }}<el-icon>
            <ArrowRight />
          </el-icon></span>
      </div>
      <el-divider />
      <div class="d-flex option-line">
        <span class="label">答卷总数限制</span>
        <span class="option" @click="answerLimitShow=true">{{ answerLimitText }}<el-icon>
            <ArrowRight />
          </el-icon></span>
      </div>
    </div>
    <div class="card-box">
      <h2 class="setting-header">
        <strong>提交后显示</strong>
      </h2>
      <div class="d-flex option-line">
        <span class="label">提交成功文本描述</span>
        <el-input v-model="publishSettingStore.submitText" class="double-model-input submit-des" placeholder="点击进行编辑" maxlength="20" @focus=" (e) => e.target.classList.add('is-focus')" @blur="(e) => e.target.classList.remove('is-focus')">
        </el-input>
      </div>
      <el-divider />
      <div class="d-flex option-line">
        <span class="label">答卷信息
          <el-tooltip placement="top">
            <template #content>提交后可查看自己的填写情况</template>
            <i class="iconfont" style="cursor: default;">&#xe8c8;</i>
          </el-tooltip>
        </span>
        <el-switch v-model="publishSettingStore.checkSubmit" :active-value="true" :inactive-value="false" />
      </div>
      <el-divider />
      <div class="d-flex option-line">
        <span class="label">跳转页面</span>
        <span class="option" @click="jumpInfoShow=true">修改<el-icon>
            <ArrowRight />
          </el-icon></span>
      </div>
    </div>
    <div class="card-box" v-if="publishSetting.typeId == 4">
      <h2 class="setting-header">
        <strong>考试设置</strong>
      </h2>
      <div class="d-flex option-line">
        <span class="label">考试完成立即展示成绩
          <el-tooltip placement="top">
            <template #content>考试完成后仅展示客观题分数，创建者手动批改主观题后将更新总分。注意，开启后将不会跳转页面。</template>
            <i class="iconfont" style="cursor: default;">&#xe8c8;</i>
          </el-tooltip>
        </span>
        <el-switch v-model="publishSettingStore.showScore" :active-value="true" :inactive-value="false" />
      </div>
      <div v-if="publishSettingStore.showScore">
        <el-divider />
        <div class="d-flex option-line">
          <span class="label">展示答案及解析
            <el-tooltip placement="top">
              <template #content>考试完成后仅展示客观题分数，创建者手动批改主观题后将更新总分</template>
              <i class="iconfont" style="cursor: default;">&#xe8c8;</i>
            </el-tooltip>
          </span>
          <el-switch v-model="publishSettingStore.showAnswer" :active-value="true" :inactive-value="false" />
        </div>
        <el-divider />
        <div class="d-flex option-line">
          <span class="label">展示评语</span>
          <el-switch v-model="publishSettingStore.showComment" :active-value="true" :inactive-value="false" />
        </div>
        <div class="limit-time-des">
          <span>开启后，将根据分数展示对应评语</span>
          <span v-if="publishSettingStore.showComment" @click="commentShow = true" class="limit-time-set">添加<el-icon>
            <ArrowRight />
            </el-icon></span>
        </div>
      </div>
    </div>
    <!-- 限制有效时间弹窗 -->
    <el-dialog v-model="timeLimitShow" title="限制有效时间" width="30%" align-center @open="handleOpen" @close="handleClose">
      <div style="width:100%;">
        <div class="d-flex">
          <span>限制开始时间</span>
          <el-switch v-model="startLimit" :active-value="true" :inactive-value="false" />
        </div>
        <el-date-picker v-if="startLimit" v-model="publishSetting.limitTime[0]" :disabled-date="disabledDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" style="margin:10px 0;" />
        <div class="d-flex">
          <span>限制结束时间</span>
          <el-switch v-model="endLimit" :active-value="true" :inactive-value="false" />
        </div>
        <el-date-picker v-if="endLimit" v-model="publishSetting.limitTime[1]" :disabled-date="disabledDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="timeLimitShow = false">取消</el-button>
          <el-button type="primary" @click="timeLimitConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- IP限制弹窗 -->
    <el-dialog v-model="ipLimitShow" title="IP限制" width="30%" align-center class="limit-ip" @open="handleOpen" @close="handleClose">
      <div class="d-flex limit-ip-line">
        <span class="label">IP限制</span>
        <el-switch v-model="publishSetting.useLimitIp" :active-value="true" :inactive-value="false" />
      </div>
      <div v-if="publishSetting.useLimitIp" class="limit-ip-number">
        一个IP地址：每<el-input-number size="small" v-model="publishSetting.limitIp[0]" :min="0" type="number"></el-input-number>
        天，填写
        <el-input-number size="small" v-model="publishSetting.limitIp[1]" :min="0" type="number"></el-input-number>次
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ipLimitShow = false">取消</el-button>
          <el-button type="primary" @click="ipLimitConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 设备限制弹窗 -->
    <el-dialog v-model="deviceLimitShow" title="设备限制" width="30%" align-center class="limit-ip" @open="handleOpen" @close="handleClose">
      <div class="d-flex limit-ip-line">
        <span class="label">设备限制</span>
        <el-switch v-model="publishSetting.useLimitDevice" :active-value="true" :inactive-value="false" />
      </div>
      <div v-if="publishSetting.useLimitDevice" class="limit-ip-number">
        一台设备：每<el-input-number size="small" v-model="publishSetting.limitDevice[0]" :min="0" type="number"></el-input-number>
        天，填写
        <el-input-number size="small" v-model="publishSetting.limitDevice[1]" :min="0" type="number"></el-input-number>次
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deviceLimitShow = false">取消</el-button>
          <el-button type="primary" @click="deviceLimitConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 答卷总数限制 -->
    <el-dialog v-model="answerLimitShow" title="答卷总数限制" width="30%" align-center class="limit-ip" @open="handleOpen" @close="handleClose">
      <div class="d-flex limit-ip-line">
        <span class="label">答卷总数限制</span>
        <el-switch v-model="publishSetting.useLimitAnswer" :active-value="true" :inactive-value="false" />
      </div>
      <div v-if="publishSetting.useLimitAnswer" class="limit-ip-number">
        答卷数不超过<el-input-number size="small" v-model="publishSetting.limitAnswer" :min="1" type="number"></el-input-number>份，数量达成后问卷将暂停搜集答卷。
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="answerLimitShow = false">取消</el-button>
          <el-button type="primary" @click="answerLimitConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 用户填写次数限制 -->
    <el-dialog v-model="submitLimitShow" title="用户填写次数限制" width="30%" align-center class="limit-ip" @open="handleOpen" @close="handleClose">
      <div class="d-flex limit-ip-line">
        <span class="label">用户填写次数限制</span>
        <el-switch v-model="publishSetting.useLimitSubmit" :active-value="true" :inactive-value="false" />
      </div>
      <div v-if="publishSetting.useLimitSubmit" class="limit-ip-number">
        每位用户填写<el-input-number size="small" v-model="publishSetting.limitSubmit" :min="1" type="number"></el-input-number>次后不可提交。
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="submitLimitShow = false">取消</el-button>
          <el-button type="primary" @click="submitLimitConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 协作人选择弹窗 -->
    <el-dialog v-model="cooperateShow" title="协作人选择" width="30%" align-center class="limit-ip" @open="handleOpen" @close="handleClose">
      <el-radio-group v-model="publishSetting.useLimitCooperate">
        <el-radio v-for="(item,index) in cooperateOptions" :key="index" :label="item.label" size="large">{{ item.name }}</el-radio>
      </el-radio-group>
      <div class="choose-box" v-if="publishSetting.useLimitCooperate === 2">
        <div class="choose-tags" v-if="publishSetting.limitCooperate.length">
          <el-tag
            v-for="item in publishSetting.limitCooperate"
            :key="item"
            closable
            @close="removeMember(item)"
          >
            {{ findUserName(item) }}
          </el-tag>
        </div>
        <div class="choose-btn" @click="handleChoose">
          <i class="iconfont">&#xe6e3;</i>选择人员
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cooperateShow = false">取消</el-button>
          <el-button type="primary" @click="cooperateLimitConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 管理权限选择弹窗 -->
    <el-dialog v-model="permissionShow" title="管理权限" width="30%" align-center class="limit-ip" @open="handleOpen" @close="handleClose">
      <div style="margin-bottom:10px;color:#333333;">选择权限：</div>
      <el-checkbox-group v-model="publishSetting.cooperatePermission">
        <el-checkbox v-for="(item,index) in permissionOptions" :key="index" :label="item.label">{{item.name}}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="permissionShow = false">取消</el-button>
          <el-button type="primary" @click="permissionConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 提交后跳转页面信息修改 -->
    <el-dialog v-model="jumpInfoShow" title="跳转信息修改" width="30%" align-center class="limit-ip" @open="handleOpen" @close="handleClose">
      <div style="width:100%;">
        <div class="jump-info">
          <div class="label">自动跳转时间</div>
          <el-input v-model="publishSetting.jumpInfo.autoTime" type="number" min="1">
            <template #append>秒</template>
          </el-input>
        </div>
        <div class="jump-info">
          <div class="label">跳转链接</div>
          <el-input v-model="publishSetting.jumpInfo.link">
            <template #prepend>Http://</template>
          </el-input>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="jumpInfoShow = false">取消</el-button>
          <el-button type="primary" @click="jumpInfoConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 评语设置弹窗 -->
    <el-dialog v-model="commentShow" title="评语添加" width="40%" align-center class="comment-setting" @open="handleOpen" @close="handleClose">
      <div style="width:100%;">
        <el-table :data="publishSetting.examComment" max-height="250">
          <el-table-column type="index" width="50" />
          <el-table-column prop="grade" label="分数范围" width="210">
            <template #default="{ row }">
              <div class="score-range">
                <el-input-number v-model="row.start" size="small" class="score-item" :min="0" />&nbsp;至&nbsp;<el-input-number v-model="row.end" size="small" class="score-item" :min="0" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="评语">
            <template #default="{ row }">
              <el-input v-model="row.comment" size="small" />
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="60">
            <template #default="scope">
              <el-button link type="danger" size="small" @click.prevent="deleteComment(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button class="add-btn" @click="addComment">添加评语</el-button>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="commentShow = false">取消</el-button>
          <el-button type="primary" @click="commentConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <memberChooseDialog v-model:dialogShow="showPersonChoose" v-model:selectedMembers="publishSetting.limitCooperate" v-model:useLimitCooperate="publishSetting.useLimitCooperate" :userList="userList"></memberChooseDialog>
  </div>
</template>

<script setup>
/* eslint-disable */
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import { getIpWhiteList, getPermissionList, getLoginAddress } from '@/api/formDesign'
import { selectRoleList, getUserList } from '@/api/user'
import { ArrowRight } from '@element-plus/icons-vue'
import { getRandomString } from "@/utils/tools"
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import memberChooseDialog from './memberChooseDialog.vue'

const route = useRoute ()
const store = useStore()
const publishSetting = ref(JSON.parse(JSON.stringify(store.getters.formDesignInfo.publishSetting)))
const publishSettingStore = computed(() => store.getters.formDesignInfo.publishSetting)
//时间展示格式化
const limitText = computed(() => {
  const startTime = publishSettingStore.value.limitTime[0]
  const endTime = publishSettingStore.value.limitTime[1]
  if (startTime && endTime) {
    return `${startTime} 至 ${endTime} 有效`
  } else if (startTime) {
    return `${startTime} 生效`
  } else if (endTime) {
    return `${endTime} 失效`
  } else {
    return '不限制'
  }
})
//弹窗打开前临时存储信息
const confirmed = ref(false)//是否通过确定按钮关闭弹窗(确定关闭才赋值)
const handleOpen = () => {
  confirmed.value = false
}
//关闭判断是否为确定关闭
const handleClose = () => {
  if (confirmed.value === true) {
    store.commit('formDesignInfo/SET_PUBLISHSETTING', publishSetting.value)
  }
  publishSetting.value = JSON.parse(JSON.stringify(publishSettingStore.value))
}
//限制有效时间
const startLimit = ref(true)
const endLimit = ref(true)
const timeLimitShow = ref(false)
const timeLimitConfirm = () => {
  confirmed.value = true
  timeLimitShow.value = false
}
const disabledDate = (time) => {
  const currentDate = new Date(); // 当前日期
  return time.getTime() < currentDate.getTime(); // 返回true表示禁用
}
watch(startLimit,(newVal) => {
  if(!newVal){
    publishSetting.value.limitTime[0] = ''
  }
})
watch(endLimit,(newVal) => {
  if(!newVal){
    publishSetting.value.limitTime[1] = ''
  }
})
watch(() =>publishSettingStore.value.useLimitTime,(newVal) => {
  publishSetting.value.useLimitTime = newVal
})
//登录填写限制
//登录站点列表
const addressList = ref()
const _addressList = async () => {
  const res = await getLoginAddress()
  if (res.code === 20000) {
    addressList.value = res.data
  }
}
// _addressList()
//角色列表
const roleList = ref()
const getRoleList = async () => {
  let res = await selectRoleList()
  if (res.code === 20000) {
    roleList.value = res.data
  }
}
getRoleList()
// 用户列表
const userList = ref()
const getUsers = async () => {
  let res = await getUserList()
  if(res.code === 20000){
    userList.value = res.data
  }
}
getUsers()
// 获取用户名
const findUserName = (id) => {
  return userList.value.find(item => item.id === id)?.name
}
//权限列表判断显示哪些
const listLoading = ref(false)
const permissionList = ref()
const allPermissionList = async () => {
  listLoading.value = true
  let res = await getPermissionList()
  if(res.code === 20000){
    permissionList.value = res.data
  }
  listLoading.value = false
}
// allPermissionList()
//授权密钥
const isInitPass = ref(false)
const initPassword = () => {
  if(isDisabled.value && !publishSettingStore.value.secretKey) return
  isInitPass.value = true
  publishSettingStore.value.secretKey= getRandomString(10)
}
const inputKey = () => {
  //用户自主输入时取消状态，可重新生成随机密钥
  isInitPass.value = false
}
//ip白名单
const ipWhiteList = ref()
const getWhiteList = async () => {
  let res = await getIpWhiteList()
  if (res.code === 20000) {
    ipWhiteList.value = res.data
  }
}
// getWhiteList()
//访问限制最多支持三项组合
const isDisabled = computed(() => {
  const { auth, secretKey, ipGroup, wifiPosition, phoneVerify, wechatVerify } = publishSettingStore.value;
  const conditions = [
    auth.length > 0,
    secretKey != '',
    ipGroup.length > 0,
    wifiPosition === true,
    phoneVerify === true,
    wechatVerify === true,
  ]
  return conditions.filter(condition => condition).length >= 3
})
//ip限制弹窗
const ipLimitText = computed(() => {
  if (!publishSettingStore.value.useLimitIp) return '不限制'
  return '每' + publishSettingStore.value.limitIp[0] + '天，填写' + publishSettingStore.value.limitIp[1] + '次'
})
const ipLimitShow = ref(false)
const ipLimitConfirm = () => {
  confirmed.value = true
  ipLimitShow.value = false
}
//设备限制弹窗
const deviceLimitText = computed(() => {
  if (!publishSettingStore.value.useLimitDevice) return '不限制'
  return '每' + publishSettingStore.value.limitDevice[0] + '天，填写' + publishSettingStore.value.limitDevice[1] + '次'
})
const deviceLimitShow = ref(false)
const deviceLimitConfirm = () => {
  confirmed.value = true
  deviceLimitShow.value = false
}
//答卷数限制弹窗
const answerLimitText = computed(() => {
  if (!publishSettingStore.value.useLimitAnswer) return '不限制'
  return '答卷总数不超过' + publishSettingStore.value.limitAnswer + '份'
})
const answerLimitShow = ref(false)
const answerLimitConfirm = () => {
  confirmed.value = true
  answerLimitShow.value = false
}
//用户填写次数限制弹窗
const submitLimitText = computed(() => {
  if (!publishSettingStore.value.useLimitSubmit) return '不限制'
  return '每位用户填写' + publishSettingStore.value.limitSubmit + '次后不可提交'
})
const submitLimitShow = ref(false)
const submitLimitConfirm = () => {
  confirmed.value = true
  submitLimitShow.value = false
}
//协作人设置
const cooperateOptions = ref([
  { label: 0, name: '仅自己可见和管理' },
  { label: 1, name: '所有人可见和管理' },
  { label: 2, name: '指定人员可见和管理' }
])
const currentCooperate = computed(() => cooperateOptions.value[publishSettingStore.value.useLimitCooperate].name)
const cooperateShow = ref(false)
const cooperateLimitConfirm = () => {
  if(publishSetting.value.useLimitCooperate === 2 && publishSetting.value.limitCooperate.length === 0){
    ElMessage({
      showClose: true,
      message: '请选择指定人员',
      type: 'warning'
    })
    return
  }
  if(publishSetting.value.useLimitCooperate !== 2){
    publishSetting.value.limitCooperate = []
  }
  confirmed.value = true
  cooperateShow.value = false
}
if(route.query && route.query.from === 'share'){
  cooperateShow.value = true
  route.query.from = ''
}
//已选择的协作人
const removeMember = (val) => {
  publishSetting.value.limitCooperate = publishSetting.value.limitCooperate.filter(item => item.account != val.account)
}
const showPersonChoose = ref(false)
const handleChoose = () => {
  cooperateShow.value = false
  showPersonChoose.value = true
}
watch(showPersonChoose,(newVal) => {
  if(!newVal){
    cooperateShow.value = true
  }
})
//管理权限设置
const permissionOptions = [
  { label: 0, name: '编辑' },
  { label: 1, name: '启用/停用该问卷' },
  { label: 2, name: '生成' },
  { label: 3, name: '统计' },
  { label: 4, name: '删除' },
]
const permissionShow = ref(false)
const permissionConfirm = () => {
  confirmed.value = true
  permissionShow.value = false
}
//提交后跳转页面
const jumpInfoShow = ref(false)
const jumpInfoConfirm = () => {
  confirmed.value = true
  jumpInfoShow.value = false
}
//评语设置
const commentShow = ref(false)
const addComment = () => {
  publishSetting.value.examComment.push({
    start: '',
    end: '',
    comment: ''
  })
}
const deleteComment = (index) => {
  publishSetting.value.examComment.splice(index, 1)
}
const commentConfirm = () => {
  confirmed.value = true
  commentShow.value = false
}
//switch状态变化清空选择
watch(() => publishSettingStore.value.useLimitTime, (newVal) => {
  if (newVal) return
  publishSettingStore.value.limitTime = ['', '']
  publishSetting.value.limitTime = ['', '']
  startLimit.value = false
  endLimit.value = false
})
watch(() => publishSettingStore.value.useAccessAuth, (newVal) => {
  if (newVal) return
  publishSettingStore.value.auth = []
  publishSettingStore.value.secretKey = ''
  publishSettingStore.value.ipGroup = []
  publishSettingStore.value.wifiPosition = false
  publishSettingStore.value.phoneVerify = false
  publishSettingStore.value.wechatVerify = false
  isInitPass.value = false
})
</script>
<style scoped lang='scss'>
.d-flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: #797979;
}
.container{
  width: 100%;
  height: calc(100vh - 64px);
  overflow: auto;
  padding-top: 10px;
  background-color: var(--el-color-primary-light-9);
  .card-box{
    width: 960px;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
    padding: 20px 40px 30px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    font-size: 16px;
    h2{
      margin-bottom: 20px;
      strong{
        font-size: 18px;
        font-weight: bold;
        margin-right: 20px;
        margin-bottom: 40px;
      }
    }
    .row{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      color: #333;
      span{
        min-width: 130px;
      }
    }
    .limit-time-des{
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #797979;
      .limit-time-set{
        cursor: pointer;
      }
    }
    .el-divider{
      margin: 20px 0;
    }
    .option-line{
      .label{
        color: #333333;
      }
      .option{
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
    .reset-password{
      cursor: pointer;
    }
    .done-reset-password{
      cursor: default;
      i{color: $successColor;}
    }
  }
}
.limit-ip{
  .label{
    color: #333333;
    margin-right: 5px;
  }
  .limit-ip-number{
    display: flex;
    align-items: center;
    .el-input-number{
      margin: 0 2px;
    }
  }
}
.jump-info{
  .label,.el-input{
    margin-bottom: 10px;
  }
}
.comment-setting{
  .score-range{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    .score-item{
      width: 90px;
    }
  }
  .add-btn{
    margin-top: 10px;
    width: 100%;
  }
}
.choose-box{
  margin-left: 20px;
  padding: 5px;
  width: calc(100% - 40px);
  border-radius: 4px;
  border: 1px solid #e4e4e4;
  .choose-tags{
    margin-bottom: 10px;
    ::v-deep .el-tag{
      margin-right: 5px;
    }
  }
  .choose-btn{
    color: $mainColor;
    cursor: pointer;
  }
}
::v-deep .el-radio-group{
  // display: block;
  .el-radio{
    width: 100%;
  }
}
::v-deep .submit-des{
  width: 35%;
  .el-input__inner{
    text-align: end !important;
    color: #797979;
  }
}
::v-deep .el-checkbox-group .el-checkbox{
  margin: 0 10px;
}
::v-deep .el-date-editor.el-input{
  width: 100%;
  .el-input__wrapper{
    width: calc(100% - 22px);
  }
}
::v-deep .el-select{
  width: 100%;
}
::v-deep .el-form-item__content{
  justify-content: flex-end;
}
</style>